<template>
	<div id="grade-class">
		<div class="dotted" 
		v-bind:class="{'background-red' : value == '红色',
		'background-green' : value == '绿色',
		'background-yellow' : value == '黄色',
		'background-pink' : value == '粉色',
		'background-gold' : value == '金色',
		'background-gray' : !value||value == '未分组'}"></div>
		<span v-if="value&&value != '未分组'"
		v-bind:class="{'color-red' : value == '红色',
		'color-green' : value == '绿色',
		'color-yellow' : value == '黄色',
		'color-gold' : value == '金色',
		'color-pink' : value == '粉色'}">{{value}}会员</span>
		<span v-else class="color-gray">未分组</span>
	</div>
</template>
<script>
	import Vue from 'vue'
	import ElementUI from 'element-ui'
	Vue.use(ElementUI);
	export default {
		props:{
			value:{
				type:String,
				default:""
			},
			field: {
				type : Object,
				default:{}
			}
		},	
		name : "wt-patient-class",
		data() {
			return{
				currentValue: ''
			}
		},
	}
</script>
<style lang="less">
 	#grade-class{ 
	font-family:"Microsoft YaHei", "微软雅黑", "宋体", Arial, sans-serif;
	.dotted{
		border-radius:50%;
		width:10px;
		height:10px;
		display:inline-block;
 	}
 	.background-red{
		background-color:#ff0000;
 	}
  	.background-green{
		background-color:#00c56a;
 	}
 	.background-yellow{
		background-color:#dbce00;
 	}
	.background-pink{
		background-color:#f79797;
 	}
	.background-gray{
		background-color:#777;
	 }
	.background-gold{
		background-color:#DCB13A;
 	}
	.color-red{
		color:#ff0000;
 	}
  	.color-green{
		color:#00c56a;
 	}
 	.color-yellow{
		color:#dbce00;
 	}
	.color-pink{
		color:#f79797;
 	}
	.color-gray{
		color:#777;
	 }
	 .color-gold{
		color:#DCB13A;
 	}
	 }
</style>